<template>
  <el-table ref="productListRef" :data="productList" v-loading="props.loading" row-key="id">
    <slot name="columns">
      <product-id></product-id>
      <product-name></product-name>
      <product-thumbnail-url></product-thumbnail-url>
      <product-original-price></product-original-price>
      <product-sale-price></product-sale-price>
      <product-total-stock></product-total-stock>
      <product-stock></product-stock>
      <product-online-status></product-online-status>
      <product-update-time></product-update-time>
    </slot>
    <slot name="operation-column"></slot>
    <el-table-column label="操作" fixed="right" width="100" v-has="[...editProductPermission, ...deleteProductPermission]">
      <template #default="scope">
        <el-button link type="primary" v-has="editProductPermission" @click="clickEdit(scope.row)">编辑</el-button>
        <el-button link type="danger" v-has="deleteProductPermission" @click="clickDelete(scope.row)">删除</el-button>
        <slot name="product-rule" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {IGoodsPageRow, IStoreProductRow} from "@/api/modules/pointsMall";
import ProductId from '@/components/goodsCenter/productListColumn/ProductId.vue';
import ProductName from '@/components/goodsCenter/productListColumn/ProductName.vue';
import ProductThumbnailUrl from '@/components/goodsCenter/productListColumn/ProductThumbnailUrl.vue';
import ProductOriginalPrice from '@/components/goodsCenter/productListColumn/ProductOriginalPrice.vue';
import ProductSalePrice from '@/components/goodsCenter/productListColumn/ProductSalePrice.vue';
import ProductTotalStock from "@/components/goodsCenter/productListColumn/ProductTotalStock.vue";
import ProductStock from "@/components/goodsCenter/productListColumn/ProductStock.vue";
import ProductOnlineStatus from "@/components/goodsCenter/productListColumn/ProductOnlineStatus.vue";
import ProductUpdateTime from "@/components/goodsCenter/productListColumn/ProductUpdateTime.vue";
import {Ref, toRef} from "vue";

const props = withDefaults(defineProps<{
  goodsRow: IGoodsPageRow
  productList: IStoreProductRow[]
  loading: boolean,
  editProductPermission: string[],
  deleteProductPermission: string[]
}>(), {
  editProductPermission: () => [],
  deleteProductPermission: () => [],
})

const emits = defineEmits(['click-edit', 'click-delete'])

const clickEdit = (rowData: IStoreProductRow) => {
  emits('click-edit', props.goodsRow, rowData)
}

const clickDelete = (rowData: IStoreProductRow) => {
  emits('click-delete', rowData, props.goodsRow)
}
</script>

<style scoped lang="scss">

</style>
